<!--
 * @Autor: lh
 * @Date: 2023-10-08 15:53:31
 * @LastEditors: lh
 * @LastEditTime: 2023-10-13 10:10:25
 * @Description: 
-->
<script lang="ts" setup>
import { ref } from "vue"

import type { TabsPaneContext } from "element-plus"
import submitbox from "./child/submit.vue"
import examinebox from "./child/examine.vue"
import allbox from "./child/allbox.vue"

//#region tab
const activeName = ref("first")
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//#endregion
</script>

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="我已提交的" name="first"></el-tab-pane>
      <el-tab-pane label="待审批的" name="second"></el-tab-pane>
      <el-tab-pane label="全部审批" name="all"></el-tab-pane>
    </el-tabs>

    <template v-if="activeName == 'first'">
      <submitbox></submitbox>
    </template>
    <template v-else-if="activeName == 'second'">
      <examinebox></examinebox>
    </template>
    <template v-else>
      <allbox></allbox>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  background: #fff;
}
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
